<template>
    <div id="app" class="container">

        <!--    前台-->
        <div>

            <Nav v-if="isShowNav"/>
            <div class="layout">
                <el-row :gutter="20">
                    <el-col :span="mainWithSize">
                        <div class="main">

                            <keep-alive>
                                <router-view v-if="$route.meta.keepAlive">
                                    <!-- 这里是会被缓存的视图组件，比如 Home！ -->
                                </router-view>
                            </keep-alive>

                            <router-view v-if="!$route.meta.keepAlive">
                                <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
                            </router-view>


                        </div>
                    </el-col>
                    <el-col :span="sliderWithSize">
                        <div class="slider">
                            <Slider v-if="isShowSlider"></Slider>
                        </div>
                    </el-col>
                </el-row>


            </div>

<!--            <el-divider>我是有底线的~</el-divider>-->

            <el-backtop>
                <div
                        style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #1989fa;
                  }"
                >
                    Top
                </div>
            </el-backtop>

            <Footer v-show="isShowNav"></Footer>

        </div>



    </div>
</template>

<script>

    import Nav from '@/view/nav'
    import Footer from '@/components/footer'
    import Slider from '@/components/slider'
    import  https from "../https";

    export default {

        name: 'App',
        data() {
            return {
                accessToken: this.$store.getters.getAccessToken,
                isShowNav: true,
                isShowSlider: true,
                mainWithSize: 18,
                sliderWithSize: 6,
            }
        },
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
            next();
        },

        // 监听,当路由发生变化的时候执行
        watch: {
            $route: {
                handler: function (val, oldVal) {
                    console.log(val.path + ":" + oldVal.path);


                    if (val.path == '/' || val.path == '/articles' || val.path.includes('/tags') || val.path.includes('/category') || val.path == '/timeline'
                        || val.path == '/message') {
                        this.isShowSlider = true
                        this.mainWithSize = 18
                        this.sliderWithSize = 6
                    } else {
                        this.isShowSlider = false
                        this.mainWithSize = 24
                        this.sliderWithSize = 0
                    }


                },
                // 深度观察监听
                deep: true
            },
            '$store.state.access_token':{
                handler:function (newVal) {

                    if (newVal == undefined) return

                    if (this.$store.getters.getUser == null) {

                        https.fetchGet('/user/info/?token=' + newVal).then((res) => {


                            const {data} = res

                            if (data.code == 200) {

                                const {user} = data.data
                                // 设置到Vuex
                                this.$store.commit('setUser', user)

                            }
                        }).catch((err) => {
                            console.log(err);
                        })
                    }
                },
                immediate: true
            },
        },
        components: {
            Nav,
            Footer,
            Slider

        }
    }
</script>

<style lang="less">
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: left;
        color: #2c3e50;
        width: 1200px;
        margin: 0 auto;
        padding-top: 61px;
    }

    img {
        vertical-align: bottom;
    }

    #app p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

</style>

